<template>
	<view class="comp-message">
		<view class="hd"><view class="title">江湖传闻</view><view class="qq-group"><text selectable>QQ群：174155071</text></view></view>
		<scroll-view scroll-y class="message-box" :scroll-into-view="intoView">
			<view style="padding-bottom:5px;padding-top:5px;">
				<view class="item" :id="`message_${item.messageIndex}`" v-for="(item,index) in messages" :key="item.messageIndex">
					<rich-text :nodes="item.content"></rich-text>
				</view>
			</view>
		</scroll-view>
		<!-- <view class="input">
			<input class="ipt" type="text" @confirm="send" v-model="input_text" placeholder="跟大家一起互动聊天吧">
			<view class="send" @click="send">发送</view>
		</view> -->
	</view>
</template>

<script>
	import { mapState} from "vuex";
	export default {
		name:"comp-message",
		computed : {
			...mapState(['mod_player']),
			player(){
				return this.mod_player.player
			}
		},
		data() {
			return {
				messages : [],
				intoView : '',
				messageIndex : 0,
				input_text : ''
			};
		},
		created() {
			
		},
		mounted() {

			this.goeasy.pubsub.history({
			    channel: 'chat', //必需项
			    limit: 20, //可选项，返回的消息条数，默认为10条，最多30条
			    onSuccess:  (response) => {

					response.content.messages.map(item => {
						this.add_message(item)
					})
					
					
			    }
			});    
			
			
			uni.$on('message',(e) => {

				this.add_message(e);

			})
		},
		methods : {
			add_message(e){
				this.messageIndex++;
				
				if(this.messages.length >= 30){
					this.messages.shift()
				}
				
				this.messages.push({
					content : e.content,
					messageIndex : this.messageIndex - 1
				});
				
				this.$nextTick(() => {
					this.intoView = `message_${this.messageIndex - 1}`;
					
				})
			},
			send(){
				if(this.input_text == ''){
					uni.showToast({
						title : '请输入聊天内容',
						icon : 'none'
					})
					return
				}
				this.$common.send_message(`<span style="color:var(--color-blue)">${this.player.nickname}</span> ${this.player.auth == 10 ? '<span style="color:var(--color-red2)">[GM]</span>' : ''}：${this.input_text}`).then(() => {
					this.input_text = ''; //清空发送消息内容
				})
				
			}
		}
	}
</script>

<style lang="scss">
	.comp-message{
		flex:1;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		
		/* 滚动条内嵌滑块 */
		::-webkit-scrollbar-thumb{
		  border-radius: 10px;
		  background: rgba(0,0,0,0.4);
		}

		
		
		.hd{
			height:30px;
			border-bottom: 1px solid #000;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.title{
				margin-left:10px;
			}
			.qq-group{
				color:var(--color-green);
				margin-right:10px;
				font-size:12px;
			}
		}
		.message-box{
			overflow-y: overlay;
			position: relative;
			flex:1;
			// height:0;
			background-color: #21252b;
			display: flex;
			flex-direction: column;
			align-content: flex-start;
			box-sizing: border-box;
			.item{
				display: flex;
				margin-bottom:5px;
				margin-left:10px;
				&:last-child{
					margin-bottom: 0;
				}
				.gm-tag{
					color:var(--color-red);
					padding-right:2px
				}
			}
		}
		.input{
			height:30px;
			border-top: 1px solid #000;
			display: flex;
			align-items: center;
			.ipt{
				height:30px;
				flex:1;
				padding:0 10px;
				font-size:14px;
			}
			.send{
				border-left:1px solid #000;
				display: flex;
				justify-content: center;
				align-items: center;
				height:30px;
				width:60px;
				background-color: $game-color-2;
				cursor: pointer;
				&:hover{
					background-color: $game-color-3;
				}
			}
		}
	}
	
</style>